<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MMS后台主页</title>
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet"
	href="${ctxStatic}/AdminLTE-2.3.11/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet"
	href="${ctxStatic}/AdminLTE-2.3.11/dist/css/AdminLTE.css">
<link rel="stylesheet"
	href="${ctxStatic}/AdminLTE-2.3.11/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${ctxStatic}/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="${ctxStatic}/css/xcConfirm.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- 顶部导航栏 -->
		<header class="main-header"> <!-- Logo --> <a href="#"
			class="logo"> <span class="logo-mini">MMS</span> <span
			class="logo-lg">会员管理系统</span>
		</a> <!-- 导航内容 --> <nav class="navbar navbar-static-top" role="navigation">
		<!-- Sidebar toggle button--> <!-- 折叠按钮 折叠左侧菜单 --> <a href="#"
			class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span
			class="sr-only">Toggle navigation</span>
		</a> <!-- 导航栏内容 -->
		<div class="navbar-custom-menu">
			<ul class="nav navbar-nav">
				<!-- 用户账号菜单 -->
				<li class="dropdown user user-menu">
					<!-- 图标按钮 --> <a href="#" class="dropdown-toggle"
					data-toggle="dropdown"> <img
						src="${ctxStatic}/AdminLTE-2.3.11/dist/img/user2-160x160.jpg"
						class="user-image" alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. -->
						<span class="hidden-xs"> <c var="user" items="${user}">${user.name}</c>
					</span>
				</a> <!-- 显示菜单 -->
					<ul class="dropdown-menu">
						<!-- The user image in the menu -->
						<li class="user-header"><img
							src="${ctxStatic}/AdminLTE-2.3.11/dist/img/user2-160x160.jpg"
							class="img-circle" alt="User Image">
							<p>
								<c var="user" items="${user}">${user.name}</c>
								<small>测试账户,创建于2016.6.12日.</small>
							</p></li>
						<!-- Menu Body -->

						<!-- Menu Footer-->
						<li class="user-footer">
							<div class="pull-left">
								<a href="#" class="btn btn-default btn-flat">修改密码</a>
							</div>
							<div class="pull-right">
								<a onclick="outLogin()" class="btn btn-default btn-flat">退出登录</a>
							</div>
						</li>
					</ul>
				</li>
				<!-- 打开右侧菜单 -->
				<li><a href="#" data-toggle="control-sidebar"><i
						class="fa fa-gears"></i></a></li>
			</ul>
		</div>
		</nav> </header>
		<!-- 左侧菜单栏 -->
		<aside class="main-sidebar"> <section class="sidebar">
		<!-- 搜索 form -->
		<form action="#" method="get" class="sidebar-form">
			<div class="input-group">
				<input type="text" name="q" class="form-control" placeholder="搜索...">
				<span class="input-group-btn">
					<button type="submit" name="search" id="search-btn"
						class="btn btn-flat">
						<i class="fa fa-search"></i>
					</button>
				</span>
			</div>
		</form>
		<!-- /.search form --> <!-- Sidebar Menu -->
		<ul class="sidebar-menu">
			<li class="header">选项菜单</li>
			<li class="active"><a href="#"> <i class="fa fa-laptop"></i>
					<span>系统管理</span> <span class="pull-right-container"> <i
						class="fa fa-angle-left pull-right"></i>
				</span>
			</a>
				<ul class="treeview-menu">
					<li><a onclick="lodaPage(this)" a-href="${mainPath}/pageToAddUser">用户管理</a></li>
					<li><a onclick="lodaPage(this)" a-href="${mainPath}/testmetab">会员列表</a></li>
					<li><a onclick="lodaPage(this)" a-href="${mainPath}/testretab">消费记录</a></li>
				</ul></li>
			<li><a href="#"> <i class="fa fa-book"></i> <span>日志管理</span>
					<span class="pull-right-container"> 
					<i class="fa fa-angle-left pull-right"></i>
				</span>
			</a>
				<ul class="treeview-menu">
					<li><a href="#">操作日志</a></li>
					<li><a href="#">错误日志</a></li>
				</ul></li>
			<li class="treeview"><a href="#"><i class="fa fa-link"></i>
					<span>公共信息</span> <span class="pull-right-container"> <i
						class="fa fa-angle-left pull-right"></i>
				</span> </a>
				<ul class="treeview-menu">
					<li><a href="#">Link in level 2</a></li>
					<li><a href="#">Link in level 2</a></li>
				</ul></li>
		</ul>
		<!-- /.sidebar-menu --> </section> </aside>
		<!-- 中间内容 -->
		<div class="content-wrapper">
			<div id="loadJspPage" style="padding-left: 10px; padding-right: 10px;"></div>
		</div>
		<!-- 底部标注 -->
		<footer class="main-footer"> <!-- To the right -->
		<div class="pull-right hidden-xs">
			<div id="systime"></div>
		</div>
		<!-- Default to the left --> <strong>Copyright &copy; 2017 <a
			href="#">Company</a>.
		</strong> All rights reserved. </footer>
		<!-- 右侧菜单栏 -->
		<aside class="control-sidebar control-sidebar-dark"></aside>
		<!-- 右侧菜单栏的样式，底部距离为0等 -->
		<div class="control-sidebar-bg"></div>
	</div>
	<!-- 模态框 -->
	<div id="myModal"></div>
	<script
		src="${ctxStatic}/AdminLTE-2.3.11/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${ctxStatic}/AdminLTE-2.3.11/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${ctxStatic}/AdminLTE-2.3.11/plugins/fastclick/fastclick.js"></script>
	<script
		src="${ctxStatic}/AdminLTE-2.3.11/plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script type="text/javascript">
		var AdminLTEOptions = {}
	</script>
	<script src="${ctxStatic}/AdminLTE-2.3.11/dist/js/app.min.js"></script>
	<script src="${ctxStatic}/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script
		src="${ctxStatic}/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>
	<%-- <script src="${ctxStatic}/js/jquery-1.9.1.js"></script> --%>
	<script src="${ctxStatic}/js/xcConfirm.js"></script>
	<script type="text/javascript">
	$(function(){
		window.alert=function(msg){
			window.wxc.xcConfirm(msg, window.wxc.xcConfirm.typeEnum.success);
		}
	});
	//退出登录
	function outLogin() {
		window.location.href = "${mainPath}/outLogin"
	}
	function lodaPage(tag) {
		console.log($(tag).attr("a-href"));
		$("#loadJspPage").load($(tag).attr("a-href"));
	}
		var operateFormatter = function(value, row, index) {//赋予的参数
			return [
					'<button class="btn btn-info btn-sm rightSize detailBtn" type="button" onclick="oprecordRow('
							+ index
							+ ')"><span class="glyphicon glyphicon-jpy" aria-hidden="true"></span> 消费</button>',
					'<button class="btn btn-info btn-sm rightSize packageBtn" type="button" onclick="opdetailRow('
							+ index
							+ ')" style="margin-left:2px;"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 详情</button>' ]
					.join('');
		}
		$(function() {
			$('#memberTable').bootstrapTable({
				url : '${mainPath}/membertab',
				method : "get", //使用get请求到服务器获取数据
				dataType : "json",
				contentType : 'application/json,charset=utf-8',
				toolbar : "#toolbar", //一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar.
				uniqueId : "id", //每一行的唯一标识，一般为主键列
				//height: document.body.clientHeight-165,   //动态获取高度值，可以使表格自适应页面
				cache : false, // 不缓存
				striped : true, // 隔行加亮
				queryParamsType : "limit", //设置为"undefined",可以获取pageNumber，pageSize，searchText，sortName，sortOrder 
				//设置为"limit",符合 RESTFul 格式的参数,可以获取limit, offset, search, sort, order 
				//queryParams: queryParams,
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				sortable : true, //是否启用排序;意味着整个表格都会排序
				sortName : 'id', // 设置默认排序为 name
				sortOrder : "asc", //排序方式
				pagination : true, //是否显示分页（*）
				search : true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
				strictSearch : true,
				showColumns : true, //是否显示所有的列
				showRefresh : true, //是否显示刷新按钮
				showToggle : true, //是否显示详细视图和列表视图
				clickToSelect : true, //是否启用点击选中行
				minimumCountColumns : 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [ 10, 15, 20 ], //可供选择的每页的行数（*）
				paginationPreText : "<<",
	        paginationNextText: ">>",
				paginationFirstText : "|<",
	        paginationLastText: ">|",
				//responseHandler: responseHandler,
				columns : [ {
					checkbox : true
				}, {
					field : 'id',
					title : 'ID',
					align : 'center',
					width : 150
				}, {
					field : 'name',
					title : '姓名',
					align : 'center',
					sortable : false
				}, {
					field : 'phone',
					title : '电话',
					align : 'center',
					sortable : false
				}, {
					field : 'remark',
					title : '备注',
					align : 'center',
					sortable : false
				}, {
					field : 'cdate',
					title : '日期',
					align : 'center'
				}, {
					field : 'operate',
					title : '操作',
					align : 'center',
					valign : 'middle',
					formatter : operateFormatter
				} ],
				onLoadSuccess : function(data) { //加载成功时执行
					//console.log(data);
				},
				onLoadError : function(res) { //加载失败时执行
					//console.log(res);
				}

			});

		});
		//默认加载时携带参数  
		//function getParams(params) {  
		//    var searchKey = $("#searchKey").val();  
		//    return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey };  
		//}
		/**消费按钮事件*/
		function oprecordRow(index) {
			/* $('#myModal').modal({
				backdrop : 'static',//点击外部不关闭
				keyboard : false,//禁用Esc关闭
				show : true,//显示
				remote : '${mainPath}/testrtab'//url内容自动填充到modal-body中 ${mainPath}/testrtab
			}); */
			$('#myModal').html('');
			$('#myModal').load('${mainPath}/testrtab',{},function(){
				$('#reModal').on('show.bs.modal',function(event){
					 var button = $(event.relatedTarget) ;
					  var recipient = button.data('whatever') ;
					  var modal = $(this);
				});
				$('#reModal').modal('show');
			});

		}
		/**详情按钮事件*/
		function opdetailRow(index) {
			alert(index);
		}

		var operateFormatter2 = function(value, row, index) {//赋予的参数
			return [
					'<button class="btn btn-info btn-sm rightSize detailBtn" type="button"><span class="glyphicon glyphicon-jpy" aria-hidden="true"></span> 消费</button>',
					'<button class="btn btn-info btn-sm rightSize packageBtn" type="button" style="margin-left:2px;"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 详情</button>' ]
					.join('');
		}
		$(function() {
			$('#recordTable').bootstrapTable({
				url : '${mainPath}/recordtab',
				method : "get", //使用get请求到服务器获取数据
				dataType : "json",
				contentType : 'application/json,charset=utf-8',
				toolbar : "#toolbar2", //一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar.
				uniqueId : "id", //每一行的唯一标识，一般为主键列
				//height: document.body.clientHeight-165,   //动态获取高度值，可以使表格自适应页面
				cache : false, // 不缓存
				striped : true, // 隔行加亮
				queryParamsType : "limit", //设置为"undefined",可以获取pageNumber，pageSize，searchText，sortName，sortOrder 
				//设置为"limit",符合 RESTFul 格式的参数,可以获取limit, offset, search, sort, order 
				//queryParams: queryParams,
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				sortable : true, //是否启用排序;意味着整个表格都会排序
				sortName : 'name', // 设置默认排序为 name
				sortOrder : "asc", //排序方式
				pagination : true, //是否显示分页（*）
				search : true, //是否显示表格搜索，
				strictSearch : true,
				showColumns : true, //是否显示所有的列
				showRefresh : true, //是否显示刷新按钮
				showToggle : true, //是否显示详细视图和列表视图
				clickToSelect : true, //是否启用点击选中行
				minimumCountColumns : 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [ 10, 15, 20 ], //可供选择的每页的行数（*）
				paginationPreText : "<<",
	        	paginationNextText: ">>",
				paginationFirstText : "|<",
	        	paginationLastText: ">|",
				//responseHandler: responseHandler,
				columns : [ {
					checkbox : true
				}, {
					field : 'id',
					title : 'ID',
					align : 'center',
					width : 150
				}, {
					field : 'mid',
					title : '会员编号',
					align : 'center',
					sortable : false
				}, {
					field : 'mname',
					title : '姓名',
					align : 'center',
					sortable : false
				}, {
					field : 'mphone',
					title : '电话',
					align : 'center',
					sortable : false
				}, {
					field : 'opera',
					title : '消费',
					align : 'center',
					sortable : false
				}, {
					field : 'balance',
					title : '余额',
					align : 'center'
				}, {
					field : 'cdate',
					title : '日期',
					align : 'center'
				}, {
					field : 'other',
					title : '其他',
					align : 'center'
				}, {
					field : 'operate',
					title : '操作',
					align : 'center',
					valign : 'middle',
					formatter : operateFormatter2
				} ],
				onLoadSuccess : function(data) { //加载成功时执行
					//console.log(data);
				},
				onLoadError : function(res) { //加载失败时执行
					//console.log(res);
				}

			});
		});
		/**获取当前日期时间*/
		Date.prototype.Format = function(fmt){ //author: meizz   
  			var o = {   
    			"M+" : this.getMonth()+1,                 //月份   
    			"d+" : this.getDate(),                    //日   
    			"h+" : this.getHours(),                   //小时   
    			"m+" : this.getMinutes(),                 //分   
    			"s+" : this.getSeconds(),                 //秒   
    			"q+" : Math.floor((this.getMonth()+3)/3), //季度   
    			"S"  : this.getMilliseconds()             //毫秒   
  			};   
  			if(/(y+)/.test(fmt))   
    			fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  			for(var k in o)   
    			if(new RegExp("("+ k +")").test(fmt))   
  			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  			return fmt;   
		}
		setInterval("systime.innerHTML=new Date().Format('yyyy-MM-dd hh:mm:ss')+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
	</script>
</body>
</html>